<!-- src/components/ComponentDocumentation.vue -->
<template>
    <div class="documentation">
      <h2>项目组件结构</h2>
      
      <div class="project-structure">
        <pre>
  src/
    ├── components/
    │   ├── TodoHeader.vue     // 任务清单头部组件
    │   ├── TodoInput.vue      // 任务输入组件
    │   ├── TodoList.vue       // 任务列表容器组件
    │   ├── TodoItem.vue       // 单个任务项组件
    │   ├── TodoFilters.vue    // 任务过滤器组件
    │   ├── TodoStats.vue      // 任务统计组件
    │   └── EmptyList.vue      // 空列表提示组件
    ├── composables/
    │   └── useTodos.js        // 任务数据管理逻辑
    ├── App.vue                // 根组件
    ├── main.js                // 入口文件
    └── style.css              // 全局样式
        </pre>
      </div>
      
      <h2>组件属性与方法</h2>
      
      <div v-for="component in components" :key="component.name" class="component-item">
        <h3>{{ component.name }}</h3>
        <div class="component-details">
          <div class="props-section" v-if="component.props.length > 0">
            <h4>属性 (Props)</h4>
            <ul>
              <li v-for="prop in component.props" :key="prop.name">
                <strong>{{ prop.name }}</strong>: {{ prop.type }} - {{ prop.description }}
              </li>
            </ul>
          </div>
          
          <div class="emits-section" v-if="component.emits.length > 0">
            <h4>事件 (Emits)</h4>
            <ul>
              <li v-for="emit in component.emits" :key="emit.name">
                <strong>{{ emit.name }}</strong> - {{ emit.description }}
              </li>
            </ul>
          </div>
          
          <div class="methods-section" v-if="component.methods.length > 0">
            <h4>方法 (Methods)</h4>
            <ul>
              <li v-for="method in component.methods" :key="method.name">
                <strong>{{ method.name }}</strong> - {{ method.description }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ComponentDocumentation',
    setup() {
      const components = [
        {
          name: 'App.vue',
          props: [],
          emits: [],
          methods: [
            { name: 'handleAddTodo', description: '处理添加新任务的逻辑' },
            { name: 'updateTodo', description: '更新现有任务' },
          ]
        },
        {
          name: 'TodoHeader.vue',
          props: [
            { name: 'remainingCount', type: 'Number', description: '剩余未完成任务数量' },
            { name: 'completedCount', type: 'Number', description: '已完成任务数量' },
            { name: 'totalCount', type: 'Number', description: '总任务数量' }
          ],
          emits: [],
          methods: []
        },
        {
          name: 'TodoInput.vue',
          props: [],
          emits: [
            { name: 'add-todo', description: '触发添加新任务事件' }
          ],
          methods: [
            { name: 'handleAddTodo', description: '处理添加任务并发出事件' }
          ]
        },
        {
          name: 'TodoList.vue',
          props: [
            { name: 'todos', type: 'Array', description: '所有任务数组' },
            { name: 'filter', type: 'String', description: '当前过滤器状态' },
            { name: 'filteredTodos', type: 'Array', description: '过滤后的任务数组' },
            { name: 'remainingCount', type: 'Number', description: '剩余未完成任务数量' },
            { name: 'completedCount', type: 'Number', description: '已完成任务数量' }
          ],
          emits: [
            { name: 'update:filter', description: '更新过滤器状态' },
            { name: 'update:todo', description: '更新任务状态' },
            { name: 'remove-todo', description: '删除任务' },
            { name: 'clear-completed', description: '清除已完成任务' }
          ],
          methods: [
            { name: 'updateTodo', description: '更新任务并发出事件' },
            { name: 'removeTodo', description: '删除任务并发出事件' }
          ]
        },
        {
          name: 'TodoItem.vue',
          props: [
            { name: 'todo', type: 'Object', description: '任务对象' },
            { name: 'index', type: 'Number', description: '任务在数组中的索引' }
          ],
          emits: [
            { name: 'update:todo', description: '更新任务对象' },
            { name: 'remove', description: '删除任务' }
          ],
          methods: [
            { name: 'handleRemove', description: '处理删除操作' }
          ]
        },
        {
          name: 'TodoFilters.vue',
          props: [
            { name: 'modelValue', type: 'String', description: '当前过滤器值' },
            { name: 'remainingCount', type: 'Number', description: '剩余未完成任务数量' },
            { name: 'completedCount', type: 'Number', description: '已完成任务数量' }
          ],
          emits: [
            { name: 'update:modelValue', description: '更新过滤器值' },
            { name: 'clear-completed', description: '清除已完成任务' }
          ],
          methods: [
            { name: 'updateFilter', description: '更新过滤器状态' }
          ]
        },
        {
          name: 'TodoStats.vue',
          props: [
            { name: 'totalCount', type: 'Number', description: '总任务数量' },
            { name: 'remainingCount', type: 'Number', description: '剩余未完成任务数量' },
            { name: 'completedCount', type: 'Number', description: '已完成任务数量' },
            { name: 'completionRate', type: 'Number', description: '任务完成百分比' },
            { name: 'lastSavedTime', type: 'String', description: '最近保存时间' }
          ],
          emits: [],
          methods: []
        },
        {
          name: 'EmptyList.vue',
          props: [],
          emits: [],
          methods: []
        },
        {
          name: 'useTodos.js',
          props: [],
          emits: [],
          methods: [
            { name: 'initialize', description: '初始化任务数据' },
            { name: 'addTodo', description: '添加新任务' },
            { name: 'removeTodo', description: '删除任务' },
            { name: 'clearCompleted', description: '清除已完成任务' },
            { name: 'updateLastSavedTime', description: '更新最近保存时间' }
          ]
        }
      ];
      
      return {
        components
      };
    }
  }
  </script>
  
  <style scoped>
  .documentation {
    margin: 20px 0;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }
  
  .project-structure {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    overflow-x: auto;
  }
  
  pre {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
  }
  
  .component-item {
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
  }
  
  .component-item h3 {
    color: #3498db;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
    display: inline-block;
  }
  
  .component-details {
    margin-left: 15px;
  }
  
  h4 {
    color: #555;
    margin: 15px 0 8px 0;
  }
  
  ul {
    margin: 0;
    padding-left: 20px;
  }
  
  li {
    margin-bottom: 5px;
  }
  
  @media (max-width: 480px) {
    .documentation {
      padding: 15px 10px;
    }
    
    .component-details {
      margin-left: 5px;
    }
  }
  </style>